import React,{Component} from 'react'
import {PhoneOutlined} from '@ant-design/icons'
import axios from "axios";
import api from '../api'
import '../pages/set.css'
import {Button, Form, Input, message, Modal} from "antd";
const layout = {
    labelCol: { span: 8},
    wrapperCol: { span: 5 },
};
class AccountSet extends Component{
    state={
        isModalVisible:false,//是否显示模态框
        adminName:'shop01',//登录的用户
        userTel:'',//用户手机号
        userCode:'',//用户验证码
        isClickCode:false,//是否点击获取验证码
        isSendTime:60,//发送验证码的时间
    }
    showModal = () => {
        this.setState({
            isModalVisible:true
        })
    };
    handleOk = (e) => {
        console.log(e)
        this.setState({
            isModalVisible:false,
        })
    };
    handleCancel = () => {
        this.setState({
            isModalVisible:false,
        })
    };
    onFinish = (values) => {
        console.log(values);
        // if(values.newPwd != values.confirmPwd){
        //     return message.error('新密码和确认密码不一致');
        // }
        // let fromDate = new FormData()
        // fromDate.append("adminName",this.state.adminName);
        // fromDate.append("adminPwd",values.oldPwd);
        // fromDate.append("newPwd",values.newPwd);
        // axios.post(api.basicSet.safeSet,
        //     fromDate,{
        //         header: {'Content-Type':'multipart/form-data'}
        //     }).then(res=>{
        //     console.log(res)
        //     if (res.data.code==6004){
        //         return message.error('原密码不正确');
        //     }
        //     if(res.data.code==200){
        //         if (values.newPwd.length>=5 && values.newPwd.length<8){
        //             this.setState({
        //                 isStrong:'弱'
        //             })
        //         }else if(this.newpwd.length>=8 && this.newpwd.length<10){
        //             this.setState({
        //                 isStrong:'较强'
        //             })
        //         }else if (this.newpwd.length>=10 && this.newpwd.length<=16){
        //             this.setState({
        //                 isStrong:'强'
        //             })
        //         }
        //         message.success ('密码修改成功')
        //     }
        // })
    };
    componentDidMount() {
        // const newarr=JSON.parse(sessionStorage.getItem('userlist'))
        // const usernames=newarr[0]
        // this.adminName=usernames
        axios.post(api.basicSet.getTel+this.state.adminName).then(res=>{
            console.log(res)
            if(res.data.code==200){
                this.setState({
                    userTel:res.data.data.shopPhone
                })
            }
        })
    }
    //点击获取验证码
    getCode=()=>{
        let code = false
        if(this.state.isClickCode===true){
            code = false
        }else{
            code=true
        }
        this.setState({
            isClickCode:code
        },()=>{
            //重新发送，需要让60s降低
            if(this.state.isClickCode===true){
                let num = this.state.isSendTime
                let Timer = setInterval(()=>{
                    num  -=1;
                    this.setState({
                        isSendTime: num
                    })
                    if(num===0){
                        clearInterval(Timer)
                        this.setState({
                            isClickCode:false
                        })
                    }
                },1000)
            }
        })
    }
    formRef = React.createRef();
    render() {
        return(
            <div className='account'>
                <h2>账号绑定</h2>
                <div className='accContent'>
                    <div className='accIcon'>
                        <PhoneOutlined />
                    </div>
                    <div>
                        <p className='toBindTel'>绑定手机号</p>
                        <p className='bindTel'>已绑定手机号:<span>{this.state.userTel}</span></p>
                    </div>
                    <div className='changePwd'><Button type="text" onClick={this.showModal}>修改</Button></div>
                </div>
                <div>
                    <Modal title="原手机验证" visible={this.state.isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel} footer={null} className='safeMotal'>
                        <Form {...layout} name="nest-messages" onFinish={this.onFinish} ref={this.formRef} initialValues={{userTel:this.state.userTel}}>
                            <Form.Item label="手机号" name="userTel" >
                                <Input type='text' disabled />
                            </Form.Item>
                            <Form.Item label="验证码" name="userCode" rules={[{ required: true, message: '请输入新密码！' }]}>
                                <Input />
                                {this.state.isClickCode===false && <Button type="primary" onClick={this.getCode} className='getCode'>
                                    获取验证码
                                </Button>}
                                {this.state.isClickCode===true && <Button type="primary" onClick={this.getCode} className='getCodeTwo'>
                                    <span>{this.state.isSendTime}</span>s后重新获取验证码
                                </Button>}
                            </Form.Item>
                            <Form.Item className='safeFrmBut'>
                                <Button htmlType="button" onClick={this.handleCancel} className='butDetele'>
                                    取消
                                </Button>
                                <Button type="primary" htmlType="submit">
                                    下一步
                                </Button>
                            </Form.Item>
                        </Form>
                    </Modal>
                </div>
            </div>
        )
    }
}
export default AccountSet